{% extends '@WebsiteBundle/layout/baselayout.html.twig' %}
{% import "@WebsiteBundle/macros/tutorialChapterTree.html.twig" as macros %}

{% block seo_title %}
	{{ seoTitle }}
{% endblock %}
{% block seo_descr %}
	{{ seoDescr }}
{% endblock %}
{% block seo_kw %}
	{{ seoKw }}
{% endblock %}

{% block head_stylesheets %}
	{{ parent() }}
	{{ encore_entry_link_tags('website_tutorial_detail') }}
{% endblock %}

{% block head_javascript %}
	{{ parent() }}
{% endblock %}

{% block body_javascript %}
	{{ parent() }}
	{{ encore_entry_script_tags('website_tutorial_detail') }}
{% endblock %}

{% block body_main %}
	{{ parent() }}
	<div class="page">
		{{ render(path('app_header', {"route":route,"sidebar":1})) }}
		<div class="page-wrapper">
			<div class="page-body">
				<div class="container-lg">
					<div class="row  mb-2 d-none d-md-block" style="background:url('{{ json_get(detail['bigImg']) }}');filter: opacity(75%);">
						<div class="col-12 topBigImg">{{ detail['name'] }}</div>
					</div>
					<div class="sticky-left2">
						<div class="btn-group-vertical">
							<a href="{{ path('app_tutorial_doFav', {'id':detail['id']}) }}" class="btn w-100" id="fav">
								{% if fav %}
									<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star-filled" width="24" height="24" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
										<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
										<path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z" stroke-width="0" fill="currentColor"></path>
									</svg>
								{% else %}
									<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
										<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
										<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
									</svg>
								{% endif %}
								<span id="favNum">{{ detail['favNumber'] }}</span>
							</a>
						</div>
					</div>
					<div class="row row-deck row-cards ">
						<div class="col-md-2  block-bg">
							<div class=" offcanvas-lg offcanvas-start" tabindex="-1" id="sidebar" aria-labelledby="sidebarOffcanvasLabel" data-bs-scroll="true">
								<div class="offcanvas-header">
									<h5 class="offcanvas-title" id="sidebarOffcanvasLabel">{{ detail['name'] }}</h5>
									<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#sidebar"></button>
								</div>
								<div class="offcanvas-body p-2 sticky-top" style="max-height: 1200px;">
									{{ macros.tutorial_chapter_tree(detail['chapter'], chapterId, 0) }}
								</div>
							</div>
						</div>
						{% if detail['content'] and detail['content']['content'] %}
							<div class="col-sm-12 col-md-8">
								<div class="card card-sm">
									<div class="card-body">
										<div class="vditor-reset" id="preview">{{ detail['content']['content']|markdown_to_html }}</div>
										<div class="d-none d-md-block social-share" data-disabled="google,qzone,douban,tencent,linkedin,diandian"></div>
									</div>
								</div>
							</div>
							<div class="col-md-2 d-none d-md-block ">
								<div class="sticky-top" id="outline"></div>
							</div>
						{% else %}
							<div class="col-sm-12 col-md-10 vh-70">
								{% include '@WebsiteBundle/empty.html.twig' %}
							</div>
						{% endif %}
					</div>
				</div>
			</div>
		</div>
		{{ render(path('app_footer')) }}
	</div>
{% endblock %}
